<template>
	<div>
		<mainTop></mainTop>
		<div class="zstdMiddleBox">
			
			<div class="zstd">
				<div class="art" v-if="oneType"
					style="width: 100%;height: 50px;border-bottom: 2px solid #eceaea;text-align: center;font-size: 21px;color: #150e52;font-weight: 500;">
					<div style="display: inline-block;height: 100%;line-height: 50px;margin-right: 50px;padding:0px 13px;cursor: pointer;"
					:class="{'originHover':selectedOriginHover==index}" 
					@click="clickoneType(index,item.id),zsTitleModuleHoverIndex=-1,selectedzsTitleModuleHover=-1"
					v-for="(item,index) in oneType.rows"
					:key="index"
					>
					{{ item.name }}</div>
					<!-- <div style="display: inline-block;height: 100%;line-height: 50px;cursor: pointer;"
					:class="{'originHover':selectedOriginHover==1}" @click="selectedOriginHover=1">美术</div> -->
				</div>
				<div class="zsTitle" 
					@mouseleave="zsTitleModuleHoverIndex = selectedzsTitleModuleHover" 
					style="width: 100%;font-family: PingFangSC-Medium, sans-serif;margin-top: 29px;">
					<div class="zsTitleModule" style="cursor: pointer;"
					:class="{'zsTitleModuleHover':zsTitleModuleHoverIndex==index||selectedzsTitleModuleHover==index}" 
					@click=" clicksecondType(index,item.id)"
					@mouseover="zsTitleModuleHoverIndex = index"
					v-for="(item,index) in secondType.data"
					:key="index"
					>
						<div style="margin-top: 10px;">{{ item.spellName }}</div>
						<div>{{ item.name }}</div>
					</div>
					
				</div>
				<div class="zsfl" style="margin-top: 25px; width: 100%;font-family: PingFangSC-Medium, sans-serif">
					<div class="classContent" style="font-family: PingFangSC-Medium, sans-serif" v-if="production">
						<div class="classModule" 
							v-for="(item,index) in production.rows"
							:key="index"
						>						
							<div>
								<router-link style="text-decoration: none;"  target="_blank" :to="{ path: '/zpDetail', query: { id: item.id} }">
								<img :src="'https://zha.heavenk.com/prod-api'+paths[index]" alt="" 
								style="width: 272px;height: 243px;z-index: 100;">
								</router-link>
								</div>
								
							<div style="padding: 10px 15px;">
								<div style="text-align: left;color: #150e52;font-size: 16px;font-weight: 600;height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"  >{{ item.name }}</div>
								<div style="margin-top: 5px;height: 51px;overflow: hidden;">
									<el-tag class="label">{{ item.productionTypeName?item.productionTypeName:item.nameProductionType }}</el-tag><el-tag class="label">{{ item.address }}</el-tag>
									<el-tag class="label">{{ item.authorNameZZ }}</el-tag>
								</div>
								<!-- <div class="enterButton"> -->
								<router-link style="text-decoration: none;"  target="_blank" :to="{ path: '/zpDetail', query: { id: item.id} }">
									<div class="enterButton">
									观看作品
									</div>
								</router-link>
								<!-- </div> -->
							</div>
						</div>
					</div>
					
				</div>
			</div>
			<div style="width: 1140px;min-width: 1140px;margin: auto;margin-top: 35px;height: 40px;" v-if="total">
				<div style="height: 60px;float: right;margin-top: 0px;">
											 <el-pagination
											      @size-change="handleSizeChange"
											      @current-change="handleCurrentChange"
											      :current-page.sync="currentPage"
											      :page-size="8"
											      layout="prev, pager, next"
											      :total="this.total">
											    </el-pagination>
												<div class="el-pagination__jump">
													共{{totalPageSize}}页，到第<div class="el-input el-pagination__editor is-in-pagination">
														<input type="text" class="inputNum" v-model="pageInputNum"
														oninput="value=value.replace(/[^\d]/g,'');
														if(value<=0)value='';if(value.length > 1 && value.substr(0,1) ==0 && value.substr(1,1) !='.'){
														value= value.substr(1,1)}" >
												</div>
												页
												</div>
												
											<button class="button1" style=""  @click="changePage">确定</button>
										</div>
			</div>
		</div>
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import mainTop from '../components/mainTop.vue'
	import mainBottom from '../components/mainBottom.vue'
	import axios from 'axios'
	export default {
	  components: { 
		  mainTop,
		  mainBottom
	   },
	   data(){
		   return{
			   zsTitleModuleHoverIndex:-1,
			   selectedzsTitleModuleHover:-1,
			   selectedOriginHover:0,
			   tags: [
			        //   { type: '分类', label: '红葡萄酒' },
					//   { type: '年份', label: '2020' },
					//   { type: '产区', label: '中国' },
			    ],
				item:'葡萄酒',
				nowYear:2020,
				pageSize: 16,
				totalCount: 1,
				totalPageSize:1,
				pageInputNum:'',
				currentPage: 1,
				oneType:'',
				secondType:'',
				total:5,
				production:'',
				paths:'',
				author:'',
				productionTypeNum:1,
				oneStatus:true,
				secondStatus:false,
				secondTypeNum:3,
				secondIndex:0,
		   };
	   },
	   created(){
			this.getOneType();
			this.getSecondType(1);
			this.getProduction(1);
			this.getauthor();
			
	   },
	   methods:{
		   handleClose(tag){
			     let _this = this;
			         for (let i = 0; i < _this.tags.length; i++) {
			           if (_this.tags[i] == tag) {
			             _this.tags.splice(i, 1);
			             break;
			           }
			         }
		   },
		   addTag(type,label){
			   this.tags=[]
			   for(var i=0;i<this.tags.length;i++){
				   if(this.tags[i].label==label){
					   return;
				   }
			   }
			   var tag={
				   type:type,
				   label:label
			   }
			   this.tags.push(tag);
		   },
		   getNowYear(){
				let nowDate = new Date();
			   this.nowYear=nowDate.getFullYear();
		   },
		   handleSizeChange(val) {
		   	console.log(`每页 ${val} 条`);
		   },
		   handleCurrentChange() {
		    //   this.contentPerPage.pn=this.currentPage;
		    //   contentList(this.contentPerPage).then(response => {
		    //           this.contentPerPageList = response.data;
		    //         });
				if (this.oneStatus===false) {
					this.clicksecondType(this.secondIndex,this.secondTypeNum,this.currentPage)
				}else{
					this.getProduction(this.productionTypeNum,this.currentPage)
				}
				
		   },
		   changeFirstPage(){
		   	this.currentPage=1;
		   	this.handleCurrentChange();
		   },
		   changeLastPage(){
		   	this.currentPage=this.totalPageSize;
		   	this.handleCurrentChange();
		   },
		   getTotalPageSize(){
		   	this.totalPageSize=this.totalCount/this.pageSize
		   },
		   changePage(){
		   	this.currentPage=parseInt(this.pageInputNum);
		   	this.handleCurrentChange();
		   },
		   getOneType(){
			axios.get('https://zha.heavenk.com/prod-api/web/productionType/oneType').then((res)=>{
				this.oneType=res.data
				// console.log(this.oneType);
			})
		   },
		   getSecondType(num){
			axios.get('https://zha.heavenk.com/prod-api/web/productionType/secondType/'+num).then((res)=>{
				this.secondType=res.data
				//console.log(this.secondType);

			})
		   },
		   getProduction(num,pnum){
				if (pnum===null) {
					pnum=1
				}
				axios.get('https://zha.heavenk.com/prod-api/web/production/list/'+num,{
					params:{
						pageNum: pnum,
						pageSize: 8,
					}
				}).then((res)=>{
					this.production=res.data
					this.total=res.data.total
					this.totalPageSize=Math.ceil(this.total/8)
					// console.log(this.production);
					let path = this.production.rows&&this.production.rows.map(item => {  
						let imgArray = item.img.split(",");  
						return imgArray[0]; // 返回第一个元素，即路径  
					});  
					this.paths=path
					
				})
				// console.log(this.paths);
		   },
		   clickoneType(index,typeId){
			   // this.zsTitleModuleHoverIndex=-1;
			   // this.zsTitleModuleHoverIndex=-1;
				this.oneStatus=true;
				this.secondStatus=false;
		 		this.selectedOriginHover=index
				this.getProduction(typeId)
				this.getSecondType(typeId)
				this.productionTypeNum=typeId
		   },
		   clicksecondType(index,id,pnum){
				this.secondTypeNum=id
				this.secondIndex=index
				if (pnum===null) {
						pnum=1
				}
				this.oneStatus=false;
				this.secondStatus=true;
				this.selectedzsTitleModuleHover=index
				axios.get('https://zha.heavenk.com/prod-api/web/production/second/'+id,{
					params:{
						pageNum: pnum,
						pageSize: 8,
					}
				}).then((res)=>{
					this.production=res.data
					this.total=res.data.total
					this.totalPageSize=Math.ceil(this.total/8)
					// console.log(this.production);
					let path = this.production.rows&&this.production.rows.map(item => {  
						let imgArray = item.img.split(",");  
						return imgArray[0]; // 返回第一个元素，即路径  
					});  
					this.paths=path
				})
		   },
		   getauthor(){
				axios.get('https://zha.heavenk.com/prod-api/web/author/list').then((res)=>{
					this.author=res.data
					// console.log(this.secondType);
				})
		   }
	   },
	   mounted() {
	   	this.getNowYear()
	   }
	}
</script>

<style>
	.zstdMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f7f7f7;
	}
	.zstd{
		width: 1140px;
		min-width: 1140px;
		/* height: 1047px; */
		margin: auto;
		margin-top: 30px;
	}
	.zsTitleModule{
		width: 210px;
		height: 97px;
		background-color: #fff;
		font-size: 17px;
		color: #150e52;
		display: inline-block;
		margin-right: 22px;
		text-align: center;
		line-height: 36px;
		font-weight: 600;
	}
	.zsTitleModule:nth-child(5n){
		width: 210px;
		height: 97px;
		background-color: #fff;
		font-size: 17px;
		color: #150e52;
		display: inline-block;
		margin-right: 0px !important;
		text-align: center;
		line-height: 36px;
		font-weight: 600;
	}
	.zsTitleModuleHover{
		background-color: #150e52 !important;
		color: #fff !important; 
	}
	.zsfl{
		
	}
	.originHover{
		font-weight: 600;
		border-bottom: 2px solid #150e52;
	}
	.flColumn{
		width: 100%;
		color: #150e52;
		border-collapse: collapse;
		border-top: 2px solid #eceaea;
		border-left: 2px solid #eceaea;
		border-right: 2px solid #eceaea;
		border-bottom: 2px solid #eceaea;
		margin-top: 25px;
	}
	.flColumn>tr>td{
		border-bottom: 2px solid #eceaea;
	}
	.columnName{
		width: 150px;
		/* min-height: 71px; */
		background-color: #eceaea;
		font-size: 17px;
		text-align: center;
		line-height: 70px;
	}
	.flContent{
		max-width: 930px;
		/* border-bottom: 2px solid #eceaea; */
		padding: 0 15px;
		
	}
	.flContent>a{
		margin: 0 35px;
		font-size: 17px;
		height: 68px;
		line-height: 68px;
		cursor: pointer;
	}
	.el-tag.el-tag--danger{
		color: #150e52 !important ; 
		background-color: #f7f7f7 !important;
		border: 2px solid #eceaea !important;
		border-radius: 0px !important;
		width: auto !important;
		font-size: 17px;
		padding-left:10px;
		padding-right: 20px;
		height: 45px;
		line-height: 43px;
	}
	.el-tag__close.el-icon-close{
		color: #fff !important;
		background-color: #d3d3d3 !important;
		height: 20px !important;
		width: 20px !important;
		line-height: 20px !important;
		right: -11px !important;
	}
	.el-icon-close:before {
	    font-size: 17px;
	}
	.el-tag{
		margin-right: 10px;
	}
	/* .classModule:hover,.classModuleRight:hover{
		transform: translateY(-10px);
		box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
	} */
	.classModule{
		width: 272px;
		height: 382px;
		background-color: #fff;
		display: inline-block;
		margin-right: 17px;
		margin-top: 18px;
		overflow: hidden;
		position: relative;
		transition: all .2s;
	}
	.classModule:hover .fg4,.classModuleRight:hover .fg4{
		/* left: 110%;
		transition: all .1s; */
	}
	/* .fg4{
		position: absolute;
		left: -110%;
		top: 0;
		width: 593px;
		height: 340px;
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
		transform: skew(-30deg);
	} */
	.classContent{
		margin-top: 15px;
		width: 100%;
		height: auto;
		min-height: 400px;
		/* height: 905px; */
	}
	.classModule:nth-child(4n){
		width: 272px;
		height: 382px;
		background-color: #fff;
		display: inline-block;
		margin-top: 18px;
		overflow: hidden;
		position: relative;
		transition: all .2s;
		margin-right: 0px !important;
	}
	.label.el-tag.el-tag--light {
		background-color: #e5eeff !important;
		font-size: 14px !important;
		border:0px !important;
		border-radius: 0px !important;
		padding: 0 15px;
		line-height: 20px;
		height: auto;
		color: #150e52;
		margin-right: 5px;
		margin-bottom: 5px;
	}
	.enterButton{
		background-color: #150e52;
		width: 100%;
		height: 30px;
		border-radius: 20px;
		margin-top: 8px;
		color: #fff;
		font-size: 15px;
		text-align: center;
		line-height: 30px;
		cursor: pointer;
	}
	.el-pagination{
		  display: inline-block;
		  float: left;
	  }
	  .el-pager li,.el-pager li.active+li {
		border: 2px solid #8c8c8c !important;
		margin-right: 12px !important;
		color: #8c8c8c;
		border-radius: 7px;
		height: 35px !important;
		font-size: 18px !important;
		line-height: 33px !important;
		width: 26px;
		font-family: Arial, Helvetica, sans-serif;
		
	  }
	   .el-pager li:hover{
		   color: #8c8c8c !important;
	   }
	  .el-pager li{
		  background-color: #f7f7f7 !important;
	  }
	  .btn-next{
		  padding-left: 2px !important;
		  background-color: #f7f7f7 !important;
	  }
		   
	   .btn-prev{
		    background-color: #f7f7f7 !important;
	   }
	  .btn-prev .el-icon-arrow-left:before,.btn-next .el-icon-arrow-right:before {
	      border: 2px solid #8c8c8c;
	      height: 31px;
	      display: flex;
	      width: 26px;
	      border-radius: 7px;
	      text-align: center;
	      margin: auto;
	      line-height: 32px;
	      font-size: 24px;
	      padding-left: 5px;
	      font-weight: 700;
		  color: #8c8c8c;
	  }
	  .el-icon-arrow-right:before {
	      content: "\E6E0";
	      margin-left: -12px;
	  }
	 
	  .button1{
	  		  width: 67px;
	  		  height: 36px;
	  		  font-size: 16px;
	  		  border-radius: 7px;
	  		  color: #ffffff;
	  		  background-color: #150e52;
	  		  font-weight: 700;
	  		  margin-left:12px;
	  		  float: left;
	  		  margin-top: 2px;
			  border: 0px;
	  }
	  .el-pager li.active {
	      color: white !important;
	      cursor: default;
	      background-color: #150e52 !important;
	      border: 1px !important;
	      /* text-align: center; */
	      line-height: 36px !important;
		  
	  }
	  .el-pagination__jump {
	      margin-left: 3px !important;
	      font-weight: 600 !important;
	      color: #8c8c8c !important;
	      font-size: 17px;
		  float: left;
		  margin-top: 1px;
	  }
	  .inputNum{
		  width: 33px !important;
		  height: 33px !important;
		  border: 2px solid #8c8c8c !important;
		  border-radius: 7px;
		  border: 0;
		  outline: none; 
		  text-align: center;
		  background-color: #f7f7f7;
	  }
	.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{
		border:0px !important;
		color: #8c8c8c !important;
	}
</style>